<template>
  <div>
    <headerNav></headerNav>
    <div class="departmentInside">
      <div class="policyNotice_Nav">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span @click="$router.push('/subscriptionpage')">政策订阅</span>>
          <span>{{ policyData.departmentName }}</span>
        </p>
      </div>
      <div class="departmentInside_top">
        <div class="departmentInside_top_time">
          <div class="departmentInside_top_time_left">
            <span>发布时间：</span>
          </div>
          <ul class="departmentInside_top_time_content">
            <li :class="timeIndex == 0 ? 'active' : ''" @click="timeEvent(0)">全部</li>
            <li :class="timeIndex == 12 ? 'active' : ''" @click="timeEvent(12)">一年内</li>
            <li :class="timeIndex == 6 ? 'active' : ''" @click="timeEvent(6)">半年内</li>
            <li :class="timeIndex == 30 ? 'active' : ''" @click="timeEvent(30)">30天内</li>
            <li :class="timeIndex == 7 ? 'active' : ''" @click="timeEvent(7)">7天内</li>
          </ul>
        </div>
        <div class="departmentInside_top_keyword">
          <div class="departmentInside_top_keyword_left">
            <span>关键词：</span>
          </div>
          <div class="departmentInside_top_keyword_content">
            <input placeholder="请输入关键字" ref="keywordInput" v-model="searchKey" />
            <span @click="policyRequest(1)">搜索</span>
          </div>
        </div>
      </div>
      <div class="departmentInside_title">
        <h3>{{ policyData.departmentName }}</h3>
        <div class="departmentInside_title_content">
          <span
            :class="policyData.whetherAttention == 1 ? 'already' : ''"
            @click="
              subscribeEven(
                policyData.whetherAttention,
                policyData.departmentId
              )
            "
          >{{ policyData.whetherAttention == 0 ? "订阅" : "已订阅" }}</span>
        </div>
        <div class="departmentInside_title_right" @click="officialWeb" v-if="linkAddress != null">
          <a :href="linkAddress" target="_blank">去官网</a>
        </div>
      </div>
      <div class="departmentInside_content">
        <div class="departmentInside_content_top">
          <p class="departmentInside_content_top_left">政策名称</p>
          <p class="departmentInside_content_top_right">发布日期</p>
        </div>
        <template v-if="policyData.departmentPolicyNotice.records.length">
          <div
            class="departmentInside_content_content"
            :key="index"
            v-for="(item, index) in policyData.departmentPolicyNotice.records"
          >
            <div class="departmentInside_content_content_left">
              <div class="departmentInside_content_content_left_right">
                <span
                  v-if="item.surplusDays != null && item.surplusDays != '' && item.surplusDays > -1"
                >剩余{{ item.surplusDays }}天</span>
                <p
                  v-if="item.projectPrice != null && item.projectPrice != ''"
                >最高{{ item.projectPrice }}万</p>
              </div>
              <p
                class="departmentInside_content_content_left_left"
                @click="seeEnterprise(item, index)"
                v-html="searchHighlight(item.title)"
              ></p>
            </div>
            <div
              class="departmentInside_content_content_right"
              v-if="item.releaseTime != null"
            >{{ item.releaseTime }}</div>
          </div>
        </template>

        <div
          class="departmentInside_not_data"
          v-if="policyData.departmentPolicyNotice.records.length === 0"
        >
          <div class="departmentInside_not_data_content">
            <img style="width: 200px; height: 200px;" src="../../../static/image/noDataBox.png" alt />
            <div style="margin-top: -40px;">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="departmentInside_bottom">
        <paging ref="paging_zi" v-on:CurrentPage="accept_CurrentValue"></paging>
      </div>
      <!-- 登录弹窗 -->
      <login-dialog ref="login" @reload="reload"></login-dialog>
      <!-- 订阅已满 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="300px"
      >
        <template #footer>
          <div class="contents_qydb">
            <img src="@/static/image/cwhyts2.png" alt class="imgs_qydb" />
            <div class="goVip">
              <div class="top">可关注数量已满</div>
              <div class="bn">成为VIP会员畅享更多权益</div>
            </div>
            <div class="option">
              <span class="spans_qydb" @click="dialogVisible = false">再用看看</span>
              <p class="ps_qydb">升级VIP</p>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import { commonRequest, postRequestSplicing } from "../../api/api.js";
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗
import { mapMutations } from "vuex";
export default {
  name: "departmentInside",
  components: {
    paging,
    loginDialog
  },
  data() {
    return {
      dialogVisible: false, // 订阅已满
      // 发布时间
      timeIndex: 0,
      // 关键字
      searchKey: "",
      // 部门id
      departmentId: this.$route.query.id,
      // 所有政策
      policyData: {
        departmentPolicyNotice: {
          records: []
        }
      },
      // 当前页
      policyIndex: 1,
      linkAddress: "" // 去官网的连接
    };
  },
  mounted() {
    if (this.$route.query.key) {
      this.searchKey = this.$route.query.key;
    }
    this.policyRequest();
    this.officialWeb(); // 点击去官网
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 跳转部门内页
    seeEnterprise(item, index) {
      if (item.entranceUrl) {
        window.open(item.entranceUrl);
      } else {
        window.open(`/inform/${id}`);
      }
    },
    // 订阅部门
    subscribeEven(val, id) {
      if (val == 0) {
        postRequestSplicing(
          "/api/home/departmentAttention",
          `departmentId=${id}`
        ).then(res => {
          if (res.code == 10001) {
            // 登录失效
            this.$refs.login.open();
          }
          if (res.code == 10002) {
            // 订阅已满
            this.dialogVisible = true;
          }
          if (res.code == 200) {
            this.$message({ type: "success", message: "订阅成功" });
            this.policyData.whetherAttention = 1;
          }
        });
      } else if (val == 1) {
        postRequestSplicing(
          "/api/home/cancelAttention",
          `departmentId=${id}`
        ).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "取消订阅成功"
            });
            this.policyData.whetherAttention = 0;
          }
        });
      }
    },
    // 搜索高亮
    searchHighlight(val) {
      if (this.searchKey == "") {
        return val;
      } else {
        return val.replace(
          new RegExp(this.searchKey, "g"),
          "<em style='color: red;font-style:normal;'>" +
            this.searchKey +
            "</em>"
        );
      }
    },
    // 接受当前选中页数
    accept_CurrentValue(value) {
      this.policyIndex = value;
      this.policyRequest();
    },
    // 数据请求
    policyRequest(index) {
      var that = this;
      var time = "";

      if (that.timeIndex != 0) {
        time = that.timeIndex;
      }
      commonRequest("/api/pms/pmsPolicyNoticeInfo/getDepartmentPolicyNotice", {
        pageNo: that.policyIndex,
        departmentId: that.departmentId,
        timeScreening: time,
        keyword: this.searchKey
      }).then(res => {
        that.policyData = res;
        that.$refs.paging_zi.totalValue(res.departmentPolicyNotice.total);
      });
    },
    // 发布时间选择
    timeEvent(value) {
      this.timeIndex = value;
      this.policyRequest();
    },
    // 点击去官网
    officialWeb() {
      commonRequest(
        "/api/pms/pmsDepartment/getDepartmentOfficialWebsite?id=" +
          this.departmentId
      ).then(res => {
        // console.log(res);
        this.linkAddress = res;
        // console.log(res);
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__footer {
  height: 310px;
}

.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

.departmentInside {
  width: 1200px;
  margin: 0px auto;
  overflow: hidden;

  .departmentInside_top {
    background-color: #fff;
    box-shadow: rgb(238, 238, 238) -1px 3px 6px;
    border-radius: 4px;

    .departmentInside_top_time {
      padding: 18px 20px;
      overflow: hidden;
      border-bottom: 1px solid rgb(238, 238, 238);

      .departmentInside_top_time_left {
        float: left;

        span {
          font-size: 14px;
          padding: 2px 6px;
          color: rgb(51, 51, 51);
        }
      }

      .departmentInside_top_time_content {
        margin-left: 82px;
        overflow: hidden;

        li {
          float: left;
          font-size: 14px;
          padding: 2px 6px;
          color: rgb(51, 51, 51);
          margin: 0 25px;
          cursor: pointer;
        }

        .active {
          background-color: rgb(68, 162, 255);
          color: rgb(255, 255, 255);
        }
      }
    }

    .departmentInside_top_keyword {
      padding: 18px 20px;
      overflow: hidden;

      .departmentInside_top_keyword_left {
        float: left;

        span {
          font-size: 14px;
          padding: 2px 6px;
          color: rgb(51, 51, 51);
        }
      }

      .departmentInside_top_keyword_content {
        margin-left: 107px;
        overflow: hidden;

        input {
          float: left;
          display: inline-block;
          width: 240px;
          height: 32px;
          background: rgb(255, 255, 255);
          border: 1px solid rgb(218, 234, 245);
          border-radius: 4px 0px 0px 4px;
          box-sizing: border-box;
          padding-left: 12px;
        }

        span {
          float: left;
          display: inline-block;
          box-sizing: border-box;
          width: 60px;
          height: 32px;
          line-height: 30px;
          background: rgb(68, 162, 255);
          border-radius: 0px 4px 4px 0px;
          text-align: center;
          margin-left: -1px;
          color: rgb(255, 255, 255);
          cursor: pointer;
        }
      }
    }
  }

  .departmentInside_title {
    margin: 20px 0;
    overflow: hidden;

    h3 {
      float: left;
      font-size: 24px;
      color: #333333;
      margin-right: 20px;
      line-height: 60px;
    }

    .departmentInside_title_content {
      float: left;
      margin-top: 16px;
      margin-right: 10px;

      span {
        display: inline-block;
        width: 50px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #daeaf5;
        border-radius: 4px;
        box-sizing: border-box;
        color: #44a2ff;
        font-size: 14px;
        cursor: pointer;
      }

      .already {
        background: #cbdce8;
        color: #fff;
      }
    }

    .departmentInside_title_right {
      float: left;

      a {
        display: block;
        margin-top: 16px;
        width: 60px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #daeaf5;
        border-radius: 4px;
        box-sizing: border-box;
        color: #44a2ff;
        cursor: pointer;
        font-size: 14px;
      }
    }
  }

  .departmentInside_content {
    margin-top: 10px;

    .departmentInside_not_data {
      .departmentInside_not_data_content {
        height: 230px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    .departmentInside_content_top {
      overflow: hidden;
      border-radius: 4px;
      background-color: rgb(40, 98, 173);
      margin-bottom: 10px;

      .departmentInside_content_top_left {
        float: left;
        width: 1040px;
        line-height: 50px;
        padding: 0px 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        color: rgb(255, 255, 255);
      }

      .departmentInside_content_top_right {
        float: right;
        width: 160px;
        line-height: 50px;
        padding: 0px 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        color: rgb(255, 255, 255);
      }
    }

    .departmentInside_content_content {
      padding: 16px 0px;
      overflow: hidden;
      background-color: rgb(255, 255, 255);
      box-shadow: rgb(238, 238, 238) -1px 3px 6px;
      border-radius: 4px;

      .departmentInside_content_content_left {
        width: 1040px;
        float: left;
        padding: 0px 20px;

        .departmentInside_content_content_left_right {
          float: right;
          margin-top: 3px;

          span {
            float: left;
            padding: 2px 5px;
            background-color: rgb(255, 241, 222);
            color: rgb(248, 162, 49);
            font-size: 12px;
            line-height: 18px;
          }

          p {
            float: left;
            padding: 2px 5px;
            background-color: rgb(255, 235, 232);
            color: rgb(242, 77, 58);
            font-size: 12px;
            line-height: 18px;
            margin-left: 10px;
          }
        }

        .departmentInside_content_content_left_left {
          line-height: 28px;
          font-size: 14px;
          margin-right: 150px;
          color: rgb(51, 51, 51);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;

          &:hover {
            color: rgb(68, 162, 255);
          }
        }
      }

      .departmentInside_content_content_right {
        float: right;
        width: 160px;
        padding: 0px 20px;
        line-height: 28px;
        font-size: 14px;
        color: rgb(117, 119, 139);
      }
    }
  }

  .departmentInside_bottom {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0px 20px;
    text-align: right;
  }
}
</style>
